<template>
  <el-row :gutter="10">
    <el-col :span="4" class="left">
      <div class="title">
        <span>丨</span>设备列表
      </div><hr>
      <ul class="device">
        <li v-for="(item,index) in settingData.deviceList" :key="index" class="li" @click="change(index)">{{ item }}</li>
      </ul>
    </el-col>


    <el-col :span="19" class="right">
      <div class="header"><span>丨</span>阈值设置</div><hr>
      <div class="main">
        <div class="time">
        <el-icon style="vertical-align: middle;"><Warning /></el-icon>
        <span style="margin-left:.1852rem ;">指标所属</span>
        <div>
          <el-select style="width: 30%; margin-top: .3704rem;" v-model="settingData.time">
            <el-option :value="'白昼'" style="padding-left: .2778rem;">白昼</el-option>
            <el-option :value="'夜晚'" style="padding-left: .2778rem;">夜晚</el-option>
          </el-select>
        </div>
      </div>


      <div class="threshold">
        <el-icon style="vertical-align: middle;"><Warning /></el-icon>
        <span style="margin-left:.1852rem ;">指标阈值</span>
      </div>
      <ul>
        <li v-for="item,index in settingData.thresholdName[settingData.deviceChoose]" :key="index">
          <div class="name">{{ item }}</div>
          <el-input placeholder="最小值" class="firstinput" v-model="settingData.min[index]" type="number"></el-input>
          <el-input placeholder="预警信息" class="input" v-model="settingData.minmsg[index]" type="string"></el-input>
          <el-input placeholder="最大值" class="input" v-model="settingData.max[index]" type="number"></el-input>
          <el-input placeholder="预警信息" class="input" v-model="settingData.maxmsg[index]" type="string"></el-input>
        </li>
      </ul>
      <div class="but">
        <el-button class="save" @click="settingData.getAllData">保存</el-button>
        <el-button class="clear" @click="settingData.clearInsert">清空全部</el-button>
      </div>
      

      </div>
      
    </el-col>
  </el-row>
</template>

<script setup>

import { useSettingData } from '@/store/Warning/Warning';
import { onMounted, reactive } from 'vue';
import { Warning } from '@element-plus/icons-vue'



const settingData = useSettingData()
 
onMounted(()=>{
  const ul=document.querySelectorAll('.device .li')
  ul[0].classList.add('active')
})


  function change(index){
    const ul=document.querySelectorAll('.device .li')
    for(let i = 0;i<ul.length;i++){
      ul[i].classList.remove('active')      
    }    
    ul[index].classList.add('active')
    settingData.deviceChoose = ul[index].innerText
  }

</script>

<style scoped>
@import url('./Setting.css');
</style>